<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/firsthop' }">首页</el-breadcrumb-item>
            <!--            <el-breadcrumb-item><a href="/">奖项查询</a></el-breadcrumb-item>-->
            <el-breadcrumb-item>课程列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--搜索区域-->
        <h2>课程列表</h2>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addContestVisible = true">添加课程</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-table :data="courseList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
            <el-table-column type="index"></el-table-column><!--索引列-->
<!--            <el-table-column prop="contestId" label="竞赛ID" width="100"></el-table-column>-->
            <el-table-column prop="courseName" label="课程名" width="600"></el-table-column>
            <el-table-column prop="courseNumber" label="课程号" width="800"></el-table-column>
        </el-table>
        <el-dialog
                title="发布课程"
                :visible.sync="addContestVisible"
                width="40%"
                @close="addDialogClosed">
            <el-form ref="addFormRef" :model="addForm"  label-width="100px">
                <el-form-item label="考试名称" prop="examName">
                    <el-input v-model="addForm.examName" ></el-input>
                </el-form-item>
                <el-form-item label="考试号" prop="examId">
                    <el-input v-model="addForm.examId" ></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addContestVisible = false">取 消</el-button><!--点击取消隐藏对话框-->
                <el-button type="primary" @click="addCourse">确 定</el-button><!--点击确定也会隐藏对话框-->
            </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "statistics",
        data() {
            return {
                //获取用户列表的参数对象
                courseList: [],
                addContestVisible:false,
                addForm:{},
            }
        },
        created() {
            this.getCourseList()
        },
        methods: {
            async getCourseList() {
                const {data: res} = await this.$http.get('getCourse')
                this.courseList = res.data
            },
            async addCourse(){
                const {data: res} = await this.$http.post('addCourse', this.addForm)
                this.addContestVisible = false
                this.$message.success('发布课程成功');
                this.getCourseList()

            },
            addDialogClosed() {
                this.$refs.addFormRef.resetFields()
            },
        }
    }
</script>

<style scoped>

</style>
